<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>多图片上传</title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
        
        #file {
            width: 1200px;
            height: 500px;
            display: none;
        }
        
        .imgs {
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid lightgray;
            margin: 5px;
            border-radius: 5px;
        }
        
        #addimg:hover {
            background-color: black;
            color: white;
        }
        
        .imgs:not(#addimg) {
            cursor: not-allowed;
        }
        
        .imgs:not(#addimg):hover {
            border: 1px solid red;
        }
        
        #files {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="mutp"> <input type="file" id="file" multiple="multiple" accept="image/*" />
        <div id="body">
            <div class="imgs" id="addimg"><label for="file" id="files">+</label></div>
        </div>
    </div>

</body>

</html>
<script src="./js/jquery-3.5.1.min.js"></script>
<script>
    $(document).on('click', '.imgs:not(#addimg)', function() {
        $(this).remove();
    })
    $("#file").change(function() {
        var files = $(this)[0].files; //拿到临时地址
        for (var i = 0; i < files.length; i++) {
            var obj = files[i];
            drawimg(obj)
        }
        $(this).val(null); //情况缓存
    })

    function drawimg(f) {
        new Promise((resolve, reject) => {
            var reader = new FileReader();
            reader.readAsDataURL(f);
            reader.onload = function(res) {
                resolve(res);
            }
        }).then(res => {
            var src = res.target.result;
            $("#addimg").after($("<img class='imgs' src='" + src + "' />"));
        })
    }
</script>